<template>
  <div class="home">
    <div class="layout">
      <div class="menu-box">
        <h3 @click="push('/qiankun-main/one')">主项目页面一</h3>
        <h3 @click="push('/qiankun-main/two')">主项目页面二</h3>
        <h3 @click="push('/qiankun-app/one')">微项目页面一</h3>
        <h3 @click="push('/qiankun-app/two')">微项目页面二</h3>
      </div>
      <div class="container" id="container">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'HomeView',
    components: {
    },
    methods: {
      push(subapp) {
        history.pushState(null, subapp, subapp);
      },
    }
  }
</script>
<style scoped lang="less">
  .home{
    width: 100%;
    height: 100vh;
    background-color: gray;
    .layout{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      .menu-box{
        width: 20%;
        height: 100%;
        background-color: #42b983;
        h3{
          cursor: pointer;
          margin-bottom: 20px;
          margin-top: 20px;
        }
      }
      .container{
        flex: 1;
        background-color: lightcoral;
        height: 100%;
      }
    }
  }
</style>
